<template>
  <div
    class="cellBox"
    :class="{
      left: formParams.labelPosition == 'left',
      top: formParams.labelPosition == 'top',
    }"
  >
    <div class="label" :style="{ width: formParams.labelWidth }">
      <span v-if="childData.isRequired" style="color: #ec1c24">*</span>
      {{ childData.labelText }}
    </div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :disabled="formParams.disabled || childData.disabled"
      :file-list="childData.value"
      :accept="childData.orderParam.accept.join(',')"
    >
      <el-button
        type="primary"
        plain
        :size="formParams.size"
        :disabled="formParams.disabled || childData.disabled"
      >文件大小不超过{{childData.orderParam.maxLength}}M</el-button>
    </el-upload>
  </div>
</template>
 
<script setup>
const props = defineProps({
  childData: {
    type: Object,
    default: () => {}
  },
  formParams: {
    type: Object,
    default: () => {}
  }
});
</script>

<style scoped>
.cellBox {
  display: flex;
}
.left {
  justify-content: flex-start;
}
.top {
  flex-direction: column;
}
.top .label {
  padding-bottom: 5px;
}
.label {
  text-align: left;
}
</style>
